import React,{Component} from "react";
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
/**
 * 登陆路由组件
 */
import './login.less'
import logo from './images/logo.jpeg'
export default class Login extends Component {
    onFinish = (values) => {
        console.log(values.username)
    }




    render() {
        return <div className="login">
            <header className="login-header">
            <img src={logo} alt="auto"/>
                <h1>React项目：后台管理系统</h1>
            </header>

            <section className="login-content">
                <h2>后台登录</h2>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}

                    onFinish={this.onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>


                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                           登陆
                        </Button>
                    </Form.Item>
                </Form>
            </section>
        </div>
    }
}
